<template>
	<view class="ShoppingAddress">
		<template v-for="(item ,index) in addressList" @longtap="isDelAddr(item.id)">
			<view class="address flex_jcsb boxSize_bb">
				<view class="a_left flexDeCo">
					<view class="al_top">{{item.detailAddress}}</view>
					<view class="al_bottom flex">
						<view class="alb_name">{{item.name}}</view>
						<view class="alb_phone">
							{{item.mobile}}
						</view>
					</view>
				</view>
				<image
					src="/static/images/ShoppingAddress/edit.png"
					mode=""
					class="a_right"
					@click="editAddress(item)"
				/>
			</view>
		</template>
		<view class="AddNewDeliveryAddress" @click="editAddress">
			新增收货地址
		</view>
		<!-- 新增收获地址弹出窗 -->
<!-- 		<up-popup :show="showAddPop" mode="center" @close="close" @open="open" :round="16">
			<view class="addPop boxSize_bb">
				<up-form v-model="addData">
					<up-form-item label="收货地址" prop="addData.address" ref="item1">
						<up-input v-model="addData.address" border="none"></up-input>
					</up-form-item>
					<up-form-item label="门牌号" prop="addData.houseNumber" ref="item1">
						<up-input v-model="addData.houseNumber" border="none"></up-input>
					</up-form-item>
					<up-form-item label="联系人" prop="addData.contactPerson" ref="item1">
						<up-input v-model="addData.contactPerson" border="none"></up-input>
					</up-form-item>
					<up-form-item label="手机号" prop="addData.phone" ref="item1">
						<up-input v-model="addData.phone" border="none"></up-input>
					</up-form-item>
				</up-form>
			</view>
		</up-popup> -->
	</view>
</template>

<script>
import { getAllAddress } from '../../api/address';
import { navigateTo, showModal, showToast } from '../../utils/promise';

	export default {
		data() {
			return {
				// address: [{
				// 	name: "李生",
				// 	phone: 18377593146,
				// 	address: "园西工业区23栋2楼216"
				// }, {
				// 	name: "李生",
				// 	phone: 18377593146,
				// 	address: "园西工业区23栋2楼216"
				// }],
				addressList: [],
				showAddPop: false,
				addData: {
					address: "",
					houseNumber: '',
					contactPerson: '',
					phone: ''
				}
			};
		},
		onShow() {
			this.getAllAddress()
		},
		methods: {
			open() {
				// console.log('open');
			},
			close() {
				this.showAddPop = false
				// console.log('close');
			},
			editAddress(item = {}) {
				uni.navigateTo({
					url: `/pages/EditShippingAddressPage/EditShippingAddressPage?id=${item.id}`
				})
			},
			getAllAddress() {
				getAllAddress().then((res) => {
					// console.log(res)
					const {code, data, msg} = res
					if(data.length === 0) {
						showModal({
							title: "提示",
							content: "您当前没有收货地址, 是否新建",
							showCancel: true,
							cancelText: "否",
							confirmText: "是"
						}).then((res) => {
							if(res.cancel) {
								return
							}
							navigateTo({
								url: "/pages/EditShippingAddressPage/EditShippingAddressPage"
							})
						})
					}
					if(code !== 0) {
						showToast({
							title: "获取地址列表失败, 请重试",
						})
						return
					}
					this.addressList = data
					// this.
				}).catch((err) => {
					console.log(err)
				})
			},
			isDelAddr(id) {
				showModal({
					title: "删除提示",
					content: "是否确定要删除该地址",
					showCancel: true,
					cancelText: "否",
					confirmText: "是",
				}).then((res) => {
					if(res.cancel) {
						return
					}
				}).catch((err) => {
					console.log(err)
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	@import "../../static/commonStyleLess/grayBox.less";

	.ShoppingAddress {
		padding: 4rpx 30rpx 0 30rpx;
		background-color: #f7f7f7;
		font-family: 'PingFang SC';
		font-size: 28rpx;
		letter-spacing: 0px;
		color: #222222;
		font-weight: 400;

		//修改lable的样式

		::v-deep .u-form-item__body__left {
			flex: 1;
			/* 让左侧占据更多空间 */
			min-width: 80rpx;
			/* 设置最小宽度 */
		}

		.address {
			padding: 30rpx;
			background: #FFFFFF;
			margin-top: 30rpx;
			align-items: center;

			.a_left {
				.al_top {
					font-weight: 600;
				}

				.al_bottom {
					font-weight: 400;
					font-size: 26rpx;
					color: #979797;
					margin-top: 20rpx;

				}
			}

			.a_right {
				width: 56rpx;
				height: 56rpx;
			}
		}

		.AddNewDeliveryAddress {
			width: 670rpx;
			height: 88rpx;
			border-radius: 8rpx;
			background: #0F4C97;
			font-size: 34rpx;
			line-height: 88rpx;
			color: #FFFFFF;
			text-align: center;
			margin: 80rpx auto 0 auto;

		}

		.addPop {
			width: 600rpx;
			padding: 30rpx;
			// height: 186rpx;
			border-top-left-radius: 16rpx;
			border-top-right-radius: 16rpx;
			background: #FFFFFF;

		}
	}
</style>